<template>
<div>
  <!-- 面包屑 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片区域 -->
  <el-card class="box-card">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="showAddDialog">添加分类</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="cat_id"
      stripe
      border
      :tree-props="{children: 'children'}">
      <el-table-column
        label="#"
        type="index">
      </el-table-column>
      <el-table-column
        prop="cat_name"
        label="分类名称">
      </el-table-column>
      <el-table-column
        prop="cat_deleted"
        label="是否有效">
        <template v-slot="mySlot_0">
          <i v-if="mySlot_0.row.cat_deleted == false"  class="el-icon-circle-check" style="color: #78ff46"></i>
          <i v-else class="el-icon-circle-close"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="cat_level"
        label="排序">
        <template v-slot="mySlot_1">
          <el-tag v-if="mySlot_1.row.cat_level == 0" size="small">一级</el-tag>
          <el-tag type="warning" v-else-if="mySlot_1.row.cat_level == 1" size="small">二级</el-tag>
          <el-tag type="danger" v-else size="small" >三级</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="mySlot_2">
          <el-button @click="editDialog(mySlot_2.row)" type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button @click="delDialog(mySlot_2.row)" type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--分页操作-->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum"
    :page-sizes="[2, 5, 10, 20]"
    :page-size="queryInfo.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>

  <!--添加商品分类的弹出框-->
  <el-dialog title="添加商品分类" v-model="addTypeVisible" width="50%">
    <!--ref 类似于dom操作获取节点，这里获取此表单-->
    <el-form :model="typeForm" status-icon :rules="rules" ref="typeForm" class="demo-ruleForm" label-width="100px">
      <el-form-item label="分类名称" prop="cat_name">
        <el-input v-model="typeForm.cat_name" ></el-input>
      </el-form-item>
      <el-form-item label="父级分类">
        <div class="block">
          <el-cascader
            v-model="cat_id"
            :options="parentTypeList"
            :props="cascader_props"
            @change="selectChange"
            clearable></el-cascader>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm('typeForm')">取 消</el-button>
            <el-button type="primary" @click="addType('typeForm')">确 定</el-button>
          </span>
    </template>
  </el-dialog>

  <!-- 编辑分类操作 -->
  <el-dialog
    title="修改分类名称"
    v-model="editTypeVisible"
    width="50%"
    center>
    <el-form :model="updateForm" status-icon :rules="rules" ref="updateForm" class="demo-ruleForm" label-width="90px">
      <el-form-item label="分类名称" prop="cat_name">
        <el-input v-model="updateForm.cat_name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="editTypeVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
          </span>
    </template>
  </el-dialog>

  <!-- 删除分类操作 -->
  <el-dialog
    title="提示"
    v-model="delTypeVisible"
    width="30%"
    center>
    <span>你确定要删除{{catName}}用户吗?</span>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="delTypeVisible = false">取 消</el-button>
            <el-button type="primary" @click="del">确 定</el-button>
          </span>
    </template>
  </el-dialog>

</div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: "categories",
  data() {
    return {
      tableData: [],
      currentPage4:4,
      queryInfo:{
        query:'',
        //type:3,
        pagenum:1, //当前第一页，每一页5条数据
        pagesize:5
      },
      total:0,
      addTypeVisible:false,
      editTypeVisible:false,
      delTypeVisible:false,
      typeForm:{
        cat_name:'',
        //分父类  id如果要添加1级分类，则父分类id应该设置为 ’0‘
        cat_pid:0,
        //`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
        cat_level:0
      },
      rules:{
        cat_name: [
          { required: true, message:'请输入商品名称', trigger: 'blur' }
        ]
      },
      parentTypeList:[],
      cat_id:[],
      cascader_props:{
        checkStrictly:true,
        label:'cat_name',
        value:'cat_id',
        expandTrigger:'hover'
      },
      catName:'',
      updateForm:[]
    }
  },
  created() {
    this.getAllType()
  },
  methods: {
    getAllType() {
      this.axios.get('categories', {
        params: this.queryInfo
      }).then(resp => {
        if (resp.data.meta.status !== 200) return ElMessage.error(resp.data.meta.msg);
        this.tableData = resp.data.data.result;
        this.total = resp.data.data.total;
        console.log(resp);

      }).catch(err => {
        console.log(err);
      })
    },
    //编辑数据
    editDialog(row) {
      this.catId = row.cat_id;
      this.catName = row.cat_name;
      this.editTypeVisible = true;
      this.axios.get(`categories/${this.catId}`).then(resp => {
        console.log(resp);
        this.updateForm = resp.data.data;
      }).catch(err => {
        console.log(err);
      })
    },
    edit() {
      this.axios.put(`categories/${this.catId}`, {
        cat_name: this.updateForm.cat_name
      }).then(resp => {
        if (resp.data.meta.status !== 200) return ElMessage.error('修改失败');
        ElMessage.success('修改成功');
        this.editTypeVisible = false;
        this.getAllType();
      }).catch(err => {
        console.log(err);
      })
    },
    //删除数据
    delDialog(row) {
      this.catId = row.cat_id;
      this.catName = row.cat_name;
      this.delTypeVisible = true;
    },
    del() {
      this.axios.delete(`categories/${this.catId}`).then(resp => {
        if (resp.data.meta.status !== 200) return ElMessage.error(resp.data.meta.msg);
        ElMessage.success("删除成功");
        this.delTypeVisible = false;
        this.getAllType();
      }).catch(err => {
        console.log(err);
      })
    },
    //重置数据
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.addTypeVisible = false;
    },
    //点击确定添加分类
    addType(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //数据验证成功才能添加
          //添加分类
          this.axios.post('categories', this.typeForm).then(resp => {
            if (resp.data.meta.status !== 201) return ElMessage.error(resp.data.meta.msg);
            ElMessage.success("添加成功");
            this.resetForm();
            this.getAllType();
            this.addTypeVisible = false;
          }).catch(err => {
            console.log(err);
          })
        }
      });
    },
    //父类商品类型
    showAddDialog() {
      this.addTypeVisible = true;
      //得到父类的分类
      this.getParentType();
    },
    getParentType() {
      this.axios.get('categories', {
        params: {
          type: 2
        }
      }).then(resp => {
        if (resp.data.meta.status !== 200) return ElMessage.error(resp.data.meta.msg);
        this.parentTypeList = resp.data.data;
        console.log(resp);

      }).catch(err => {
        console.log(err);
      })
    },
    //在三级联动中获取选中的id
    selectChange() {
      if (this.cat_id && this.cat_id.length > 0) {
        this.typeForm.cat_pid = this.cat_id[this.cat_id.length - 1];
        this.typeForm.cat_level = this.cat_id.length;
      } else {
        this.cat_id = [];
        this.typeForm.cat_pid = 0;
        this.typeForm.cat_level = 0;
      }

    },
    //每一页几条数据
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getAllType();
    },
    //当前第几页
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.getAllType();
    },

    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([])
      }, 1000)
    }
  }
}
</script>

<style scoped>
.el-breadcrumb{
  font-size: 20px;
}
.box-card{
  margin-top: 20px;
}
.el-pagination{
  margin-top: 10px;
}
</style>
